<template>
  <div class="container">
    <div class='login'>
      <div class="login-form">
        <input type="text" v-model='account' placeholder="account">

        <div class="horvital-line"></div>

        <input type="password" v-model='password' placeholder='password'>
      </div>
      <button @click='login' class="login-button"></button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      account: 'guaguaerhao',
      password: '123123'
    }
  },
  methods: {
    login () {
      let form = {
        account: this.account,
        password: this.password
      }
      this.$store.dispatch('Login', form).then(res => {
        this.$router.push({ path: this.redirect || '/admin' })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang='stylus'>
.container
  --light-color rgba(255,255,255,1)
  --dark-color rgba(222,98,98,1)
  display flex
  justify-content center
  align-items center
  height 100vh
  background var(--light-color)
.login
  position absolute
  display flex
  justify-content center
  align-items center
  animation dropDown .5s ease-in
.login-form
  display flex
  flex-direction column
  border-radius 8px
  color var(--light-color)
  padding 5px 22px
  background-color var(--dark-color)
  .horvital-line
    height 2px
    background-color var(--light-color)
  input
    width 250px
    height 40px
    line-height 40px
    color #ffffff
    background-color inherit
    outline none
.login-button
  margin-left -30px
  height 60px
  width 60px
  border 5px solid var(--light-color)
  border-radius 50%
  background-color var(--dark-color)
  outline none
  cursor pointer
  &:after
    margin 0 -6px -4px 0
    display: block;
    content ''
    display inline-block
    height 0
    width 0
    border-style solid
    border-color transparent
    border-width 12px 7px 7px 7px
    border-top-color var(--light-color)
    transform rotate(-90deg)
// 修改input的placeholder
::-webkit-input-placeholder
  color #fff
:-moz-placeholder
  color #fff
::-moz-placeholder
  color #fff
:-ms-input-placeholder
  color #fff
@keyframes dropDown{
  from {
    top -91px
    opacity 0
  }
  to {
    top 43vh
    opacity 1
  }
}
</style>
